const Link = ReactRouter.Link;

import { Page, ModalBox, ModalHeader, ModalBody, ModalFooter } from '../../components/components.js';
import { LANG, ajax, url} from '../../config/config.js';

const jump = ReactRouter.hashHistory;

// 忘记密码模态框
class ForgetModal extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      foget: {},
      close: this.props.close,
      countdown: false,
      countdownPrompt: 60
    };

    this.getInputValue = this.getInputValue.bind(this);
    this.closeModalClick = this.closeModalClick.bind(this);
    this.countdownClick = this.countdownClick.bind(this);
  }

  // 如果传值变了就调用
  componentWillReceiveProps(nextProps){
    if (!nextProps.close) {
      this.setState({
        close: false
      });
    }
  }

  // 获取输入框的值
  getInputValue(E) {
    const target = E.target;
    const value = target.value;
    const name = target.name;

    let foget = this.state.singin;
    foget[name] = value;

    this.setState({
      foget: foget
    });
  }

  // {LANG[Lang].close}模态框
  closeModalClick() {
    this.setState({close: !this.close})
  }

  //倒计时
  countdownClick() {
    if(!this.state.countdown) {
      this.setState({
        countdown: true
      })
      var countdownEvent = setInterval(function(){
        if (this.state.countdownPrompt <= 0) {
          this.setState({
            countdownPrompt: 60,
            countdown: false
          })
          clearInterval(countdownEvent);
        } else {
          this.setState({
            countdownPrompt: --this.state.countdownPrompt
          })
        }
      }.bind(this), 1000);
    }
  }

  render() {
    return (
      <ModalBox close={this.state.close}>
        <ModalHeader>
          <button type="button" className="close" ><span onClick={this.closeModalClick}>&times;</span></button>
          <h4 className="modal-title">{LANG[Lang].forgetPassword}</h4>
        </ModalHeader>
        <ModalBody>
          <form className="form-horizontal">
            <div className="form-group">
              <label for="fotget_phoneNumber" className="col-sm-3 control-label">{LANG[Lang].phoneNumber}:</label>
              <div className="col-sm-8">
                <input type="email" className="form-control" pattern="[0-9]" id="fotget_phoneNumber" name="phoneNumber" placeholder={LANG[Lang].phoneNumber}/>
              </div>
            </div>

            <div className="form-group">
              <label for="fotget_token" className="col-sm-3 control-label">{LANG[Lang].tokenNumber}:</label>
              <div className="col-sm-8">
                <div className="input-group col-sm-12">
                  <input type="text" className="form-control" id="fotget_token" name="token" placeholder={LANG[Lang].entryTokenNumber} />
                  <div className={this.state.countdown ? 'input-group-addon btn disabled' : 'input-group-addon btn btn-success'} onClick={this.countdownClick}>{this.state.countdown ? this.state.countdownPrompt + '秒' : LANG[Lang].getTokenNumber}</div>
                </div>
              </div>
            </div>

            <div className="form-group">
              <label for="fotget_newPassword" className="col-sm-3 control-label">{LANG[Lang].newPassword}:</label>
              <div className="col-sm-8">
                <input type="password" className="form-control" id="fotget_newPassword" name="nwePassword" placeholder={LANG[Lang].newPassword} />
              </div>
            </div>

            <div className="form-group">
              <label for="fotget_passwordAgain" className="col-sm-3 control-label">{LANG[Lang].passWordAgain}:</label>
              <div className="col-sm-8">
                <input type="password" className="form-control" id="fotget_passwordAgain" name="passwordAgain" placeholder={LANG[Lang].passWordAgain} />
              </div>
            </div>
          </form>
        </ModalBody>
        <ModalFooter>
          <button type="button" className="btn btn-default" onClick={this.closeModalClick}>{LANG[Lang].close}</button>
          <button type="button" className="btn btn-primary">{LANG[Lang].entry}</button>
        </ModalFooter>
      </ModalBox>
    )
  }
}

// 新建用户模态框
class AddNewUser extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      foget: {},
      close: this.props.close,
      countdown: false,
      countdownPrompt: 60
    };

    this.getInputValue = this.getInputValue.bind(this);
    this.closeModalClick = this.closeModalClick.bind(this);
    this.countdownClick = this.countdownClick.bind(this)
  }

  // 如果传值变了就调用
  componentWillReceiveProps(nextProps){
    if (!nextProps.close) {
      this.setState({
        close: false
      });
    }
  }

  // 获取输入框的值
  getInputValue(E) {
    const target = E.target;
    const value = target.value;
    const name = target.name;

    let foget = this.state.singin;
    foget[name] = value;

    this.setState({
      foget: foget
    });
  }

  // 关闭模态框
  closeModalClick() {
    this.setState({close: !this.close})
  }

  //倒计时
  countdownClick() {
    if(!this.state.countdown) {
      this.setState({
        countdown: true
      })
      var countdownEvent = setInterval(function(){
        if (this.state.countdownPrompt <= 0) {
          this.setState({
            countdownPrompt: 60,
            countdown: false
          })
          clearInterval(countdownEvent);
        } else {
          this.setState({
            countdownPrompt: --this.state.countdownPrompt
          })
        }
      }.bind(this), 1000);
    }
  }

  render() {
    return (
      <ModalBox close={this.state.close}>
        <ModalHeader>
          <button type="button" className="close" ><span onClick={this.closeModalClick}>&times;</span></button>
          <h4 className="modal-title">注册</h4>
        </ModalHeader>
        <ModalBody>
          <form className="form-horizontal">

            <div className="form-group">
              <label for="addNewUser_token" className="col-sm-3 control-label">{LANG[Lang].tokenNumber}:</label>
              <div className="col-sm-8">
                <input type="text" className="form-control" pattern="[0-9]" id="addNewUser_phoneNumber" name="tokenNumber" placeholder={LANG[Lang].phoneNumber}/>
              </div>
            </div>

            <div className="form-group">
              <label for="addNewUser_token" className="col-sm-3 control-label">{LANG[Lang].tokenNumber}:</label>
              <div className="col-sm-8">
                <div className="input-group col-sm-12">
                  <input type="text" className="form-control" id="addNewUser_token" name="token" placeholder={LANG[Lang].entryTokenNumber} />
                  <div className={this.state.countdown ? 'input-group-addon btn disabled' : 'input-group-addon btn btn-success'} onClick={this.countdownClick}>{this.state.countdown ? this.state.countdownPrompt + '秒' : LANG[Lang].getTokenNumber}</div>
                </div>
              </div>
            </div>

            <div className="form-group">
              <label for="addNewUser_token" className="col-sm-3 control-label">{LANG[Lang].tokenNumber}:</label>
              <div className="col-sm-8">
                <input type="password" className="form-control" id="addNewUser_password" name="password" placeholder={LANG[Lang].entryPassword}/>
              </div>
            </div>

          </form>
        </ModalBody>
        <ModalFooter>
          <button type="button" className="btn btn-default" onClick={this.closeModalClick}>{LANG[Lang].close}</button>
          <button type="button" className="btn btn-primary">{LANG[Lang].entry}</button>
        </ModalFooter>
      </ModalBox>
    )
  }

}

class singin extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      singin: '',
      forgetClose: true,
      addNewUser: true,
      abc: false
      // remember: false
    };

    this.getInputValue = this.getInputValue.bind(this);
    this.rememberClick = this.rememberClick.bind(this);
    this.singinClick = this.singinClick.bind(this);
    this.openModal = this.openModal.bind(this);
    this.keydown = this.keydown.bind(this);
    this.token = this.token.bind(this);
  }

  componentWillMount() {
    // 如果浏览器存储用户信息，将自动填写
    if (localStorage.remember === 'true') {
      console.log(12345678989);
      this.setState({
        singin: {
          username: localStorage.lidiUserName,
          password: localStorage.lidiPassword
        },
        remember: true
      })
    } else {
      this.setState({
        singin: {
          singin: '',
          password: ''
        },
        remember: false
      })
    }
  }

  // 验证
  token(E) {
    if (!E.target.value) {
      E.target.parentNode.parentNode.className="form-group has-error";
    } else {
      E.target.parentNode.parentNode.className="form-group"
    }
  }

  // 登入事件
  singinClick() {
    document.getElementById('user_password').parentNode.parentNode.className = this.state.singin.password ? "form-group" : "form-group has-error";
    if (this.state.singin.username && this.state.singin.password) {
      this.singin()
    }
  }

  singin() {
    ajax({
      type: 'POST',
      url: url.singIn,
      data: this.state.singin,
      success: function(data) {
       if (data.success) {
         if (this.state.remember) {
           localStorage.remember = true;
           localStorage.lidiUserName = this.state.singin.username;
           localStorage.lidiPassword = this.state.singin.password;
         } else {
           localStorage.remember = false;
           localStorage.lidiUserName = '';
           localStorage.lidiPassword = '';
         }
         localStorage.token = data.token;

         jump.push({
           pathname : 'orderManagement',
          //  query : {token : localStorage.token },
           state : {fromDashboard : true }
         })
       } else {
         alert('用户名或密码错误')
       }
     }.bind(this),
      error: function(data){
        console.log(data);
      }
    });
  }

  // 登入的键盘事件
  keydown(E) {
    if (E.keyCode === 13) {
      document.getElementById('user_password').parentNode.parentNode.className = this.state.singin.password ? "form-group" : "form-group has-error";
      if (this.state.singin.username && this.state.singin.password) {
        this.singin()
      }
    }
  }

  // 自动获取 input 值
  getInputValue(E) {
    const target = E.target;
    const value = target.value;
    const name = target.name;

    let singin = this.state.singin;
    singin[name] = value;

    this.setState({
      singin: singin
    });
  }

  // 记住用户
  rememberClick(E) {
    const target = E.target;
    const value = target.checked;
    const name = target.name;
    this.setState({
      [name]: value
    });
  }

  // 打开模态框
  openModal(E) {
    const target = E.target;

    if (target.name == 'forget') {
      this.setState({
        forgetClose: false,
        addNewUser: true
      })
    } else {
      this.setState({
        forgetClose: true,
        addNewUser: false
      })
    }
  }


  render() {
    return (
      <Page className="footer">
        <div className="container-fluid">
          <form className="singin">
            <div className="form-group">
              <label for="user_name">{LANG[Lang].userName}</label>
              <div className="input-group">
                <div className="input-group-addon"><i className="glyphicon glyphicon-user"></i></div>
                <input className="form-control" autoFocus={true} type="text" id="user_name" name="username" placeholder={LANG[Lang].userName} value={this.state.singin.username} onChange={this.getInputValue} onBlur={this.token}/>
              </div>
            </div>

            <div className="form-group">
              <label for="user_password">{LANG[Lang].password}</label>
                <div className="input-group">
                  <div className="input-group-addon"><i className="glyphicon glyphicon-lock"></i></div>
                  <input className="form-control" type="password" id="user_password" name="password" placeholder={LANG[Lang].password} value={this.state.singin.password} onChange={this.getInputValue} onKeyDown={this.keydown} onBlur={this.token}/>
                </div>
            </div>

            <div className="checkbox">
              <label>
                <input type="checkbox" name="remember" checked={this.state.remember} onClick={this.rememberClick}/> {LANG[Lang].remember}
              </label>
            </div>

            <div className="form-group">
              <button type="button" className="btn btn-block btn-success" onClick={this.singinClick}>{LANG[Lang].singIn}</button>
            </div>

            <div className="form-group">
              <div className="col-sm-6 col-xs-6">
                <a onClick={this.openModal} name="forget">{LANG[Lang].forgetPassword}</a>
              </div>
              <div className="col-sm-6 col-xs-6 text-right">
                <a onClick={this.openModal} name="addNewUser">{LANG[Lang].singUp}</a>
              </div>
            </div>
          </form>
          <ForgetModal close={this.state.forgetClose}/>
          <AddNewUser close={this.state.addNewUser}/>
        </div>
        <div className="home-footer">
          <p><span>备案号：0000000000000</span><span>技术支持：xxxxxxxxxxxxxxxxxx</span> <span>&copy;2017-02-16 xxxxxxx 版权所有</span></p>
        </div>
      </Page>
    )
  }
}

module.exports = singin;
